<template>
    <div class="">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="600px"
                @close="close"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model.trim="form.sort" autocomplete="off" placeholder="请输入排序" ></el-input>
                </el-form-item>
                <el-form-item label="属性名称" prop="name" :required="true">
                    <el-input v-model.trim="form.name" autocomplete="off" placeholder="请输入属性名称" ></el-input>
                </el-form-item>
                <el-form-item label="属性值"  prop="attr_str">
                    <el-scrollbar>
                        <div class="overhide bor_b_el pad_tb_5" v-for="(item,index) in attr_str" :key="index">
                            <div class="vl fl"><el-input v-model="item.sxz" placeholder="请输入属性值" auto-complete="off"></el-input></div>
                            <div class="vr fr t_c"><el-button size="mini" type="danger"  @click="delSpecMethod(index)">删除</el-button></div>
                        </div>
                        <div class="subjectcolor curs" @click="addSpecMethod" v-show="this.attr_str.length<8">
                            <i class="el-icon-circle-plus mar_r5"></i>添加属性值
                        </div>
                    </el-scrollbar>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { attrSave } from "@/api/good";
    export default {
        name: "attrSave",
        created() {
            // for(var k = 0,j = res.data.length;k < j; k++){
            //     let specObj = {
            //         sxz:res.data[k].name,
            //         sxzId:res.data[k].id,
            //     }
            //     this.$set(this.attribute, this.attribute.length, specObj)
            // }
        },
        data() {
            return {
                form: {
                    id:'',
                    name: "",
                    sort: "1",
                },
                attr_str:[],
                title: "",
                dialogFormVisible: false,
            }
        },
        components: {
        },
        methods: {
            //点击添加一行属性
            addSpecMethod() {
                let specObj = {
                    sxz:'',
                }
                this.$set(this.attr_str, this.attr_str.length, specObj)
            },
            //点击删除属性
            delSpecMethod(index) {
                this.$delete(this.attr_str, index)
            },
            showEdit(row) {
                if (!row) {
                    this.title = "添加";
                } else {
                    this.title = "编辑";
                    this.form = Object.assign({}, row);
                    if(row.attr_str && row.attr_str!=null){
                        this.attr_str = row.attr_str.map((item =>({sxz:item.sxz})))
                    }
                }
                this.dialogFormVisible = true;
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.attr_str=[]
                this.dialogFormVisible = false;
            },
            setStoreId(storeId){
              this.form.storeId = storeId
            },
            save() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        // this.form.attr_str = this.form.attr_str.map((item) => item.sxz)
                        this.form.attr_str =  this.attr_str
                        const { msg } = await attrSave(this.form);
                        this.$baseMessage(msg, "success");
                        this.$emit("fetchData");
                        this.close();
                    } else {
                        return false;
                    }
                });
            },
        }
    };
</script>
